$(function () {

    // front tabs switch
    var popUpSun = $('#popup-sun');
    var popUpDio = $('#popup-dio');
    var selectorSun = $('#selector-type-sun');
    var selectorDio = $('#selector-type-dio');

    $(selectorSun).on('click', function () {
        popUpDio.hide();
        popUpSun.toggle();
    });
    $(selectorDio).on('click', function () {
        popUpSun.hide();
        popUpDio.toggle();
    });

    $('#menu-button').on('click', function (e) {
        e.preventDefault();

        $('#left-nav').toggle();
        $('#right-nav').toggle();
    });

    /* Filter Scroll Effect */
    //    var logo = $('#filter-container').offset().top + 90;

    $(window).scroll(function () {

        if ($(this).scrollTop() > logo) {
            $("#filter-container").addClass("fixed");
            $('#filter-toggle-button').show();
        } else {
            $("#filter-container").removeClass("fixed");
            $("#filter-container").show();
            $('#filter-toggle-button').hide();
        }
    });

    $('#filter-toggle-button').on('click', function () {
        var filter = $('#filter-container');
        var button = $('#filter-toggle-button');

        filter.toggleClass('slide');

        var isSlided = filter.hasClass('slide');

        if (isSlided) {
            filter.animate({
                top: '0'
            });
            button.text('hide filter');
        } else {
            filter.animate({
                top: '-220px'
            });
            button.text('show filter');
        }
    });

    $('#lang-button').on('click', function (e) {
        e.preventDefault();

        $('#lang-select').toggle();
    });

    // toggle class slide and query it, if found slide in else slide out the search
    $('#search-button').on('click', function () {
        var searchSlide = $('#search-slide');

        searchSlide.toggleClass('slide');

        var isSlided = searchSlide.hasClass('slide');

        if (isSlided) {
            searchSlide.animate({
                right: '0px'
            }, function () {
                // callback to focus the input field after the animation is over
                $('#search-input-container input').focus();
            });

        } else {
            searchSlide.animate({
                right: '-385px'
            });
        }
    });

    // on close button click slide out the search an reset class slide
    $('#search-close-button').on('click', function () {
        var searchSlide = $('#search-slide');
        searchSlide.removeClass('slide');
        searchSlide.animate({
            right: '-385px'
        });
    });

    //    $('.item').on('mouseenter', function() {
    //        $(this).find('.product-image img').stop().animate({width: '290px'}, 300);
    //        $(this).find('.product-image').stop().animate({width: '240px', margin: 0}, 300);
    //    });
    //    $('.item').on('mouseleave', function() {
    //        $(this).find('.product-image img').stop().animate({width: '220px'}, 300);
    //        $(this).find('.product-image').stop().animate({width: '220px', margin: '10px'}, 300);
    //    });

    // about page recommendations popups
    $('.recom').on('click', function (e) {
        e.preventDefault();

        $('.recom-popup, .recom').hide();
        $(this).siblings('.recom-popup').stop().fadeIn();
    });

    $('.popup-close').on('click', function () {
        $(this).parents('.recom-popup').fadeOut();
        $('.recom').fadeIn();
    });

}());

;
(function ($) {

    // fliter grid masonry config, centers the container
    var container = document.querySelector('#filter-grid-container');
    var msnry = new Masonry(container, {
        itemSelector: '.item',
        gutter: 16,
        isFitWidth: true
    });

    var container = document.querySelector('#additional-images-grid');
    var msnry = new Masonry(container, {
        itemSelector: '.item',
        gutter: 16,
        isFitWidth: true
    });

    var container = document.querySelector('#article-grid-container');
    var msnry = new Masonry(container, {
        itemSelector: '.item-article',
        gutter: 20,
        isFitWidth: true
    });

}(jQuery));

/*
 * Viewport - jQuery selectors for finding elements in viewport
 *
 * Copyright (c) 2008-2009 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *  http://www.appelsiini.net/projects/viewport
 *
 */
;
(function ($) {

    $.belowthefold = function (element, settings) {
        var fold = $(window).height() + $(window).scrollTop();
        return fold <= $(element).offset().top - settings.threshold;
    };

    $.abovethetop = function (element, settings) {
        var top = $(window).scrollTop();
        return top >= $(element).offset().top + $(element).height() - settings.threshold;
    };

    $.rightofscreen = function (element, settings) {
        var fold = $(window).width() + $(window).scrollLeft();
        return fold <= $(element).offset().left - settings.threshold;
    };

    $.leftofscreen = function (element, settings) {
        var left = $(window).scrollLeft();
        return left >= $(element).offset().left + $(element).width() - settings.threshold;
    };

    $.inviewport = function (element, settings) {
        return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
    };

    $.extend($.expr[':'], {
        "below-the-fold": function (a, i, m) {
            return $.belowthefold(a, {
                threshold: 0
            });
        },
        "above-the-top": function (a, i, m) {
            return $.abovethetop(a, {
                threshold: 0
            });
        },
        "left-of-screen": function (a, i, m) {
            return $.leftofscreen(a, {
                threshold: 0
            });
        },
        "right-of-screen": function (a, i, m) {
            return $.rightofscreen(a, {
                threshold: 0
            });
        },
        "in-viewport": function (a, i, m) {
            return $.inviewport(a, {
                threshold: 0
            });
        }
    });

})(jQuery);